<template>
    <div>
        <el-row>
            <!-- 查询栏 -->
            <el-form :inline="true" :model="searchModel">
                <el-col :sm="8" :md="8" :lg="4" :xl="3">
                    <el-form-item>
                        <el-input placeholder="请填写井名" v-model="searchModel.wellName" clearable maxlength="20" />
                    </el-form-item>
                </el-col>
                <el-col :sm="8" :md="8" :lg="4" :xl="3">
                    <el-form-item>
                        <el-select v-model="searchModel.wellType" clearable placeholder="请选择井型">
                            <el-option v-for="item in wellClassesOptions" :key="item" :label="item" :value="item" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :sm="8" :md="8" :lg="4" :xl="3">
                    <el-form-item>
                        <el-select v-model="searchModel.wellCategory" clearable placeholder="请选择井别">
                            <el-option v-for="item in wellTypeOptions" :key="item" :label="item" :value="item" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :sm="16" :md="16" :lg="8" :xl="5">
                    <el-form-item>
                        <el-date-picker
                            v-model="searchModel.startDrillDate"
                            type="date"
                            align="right"
                            value-format="yyyy-MM-dd"
                            style="width: 47%"
                            placeholder="开始日期"
                        >
                        </el-date-picker>
                        <span style="color: #c0c0c0">&nbsp;-&nbsp;</span>
                        <el-date-picker
                            v-model="searchModel.endDrillDate"
                            type="date"
                            align="right"
                            value-format="yyyy-MM-dd"
                            style="width: 47%"
                            placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :sm="4" :md="4" :lg="2" :xl="1">
                    <el-form-item>
                        <el-button type="primary" @click="submitSearchModel">查询</el-button>
                    </el-form-item>
                </el-col>
                <el-col :sm="4" :md="4" :lg="2" :xl="1">
                    <el-form-item>
                    <el-button type="success" @click="submitAddModel" >新增</el-button>
                </el-form-item>
            </el-col>
            </el-form>
        </el-row>

        <!-- 查询结果表格展示 -->
        <el-row style="width: 100.3%">
            <el-table
                :data="tableData"
                border
                style="width: 100%; font-size: 10px"
                :max-height="tableHeight"
                :header-row-style="rowStyle"
                :header-cell-style="cellStyle"
                :row-style="rowStyle"
                :cell-style="cellStyle"
                stripe
            >
                <el-table-column
                    v-if="tableHead[0]"
                    :label="tableHead[0].label"
                    :prop="tableHead[0].property"
                    width="100"
                    align="center"
                    fixed="left"
                />
                <el-table-column
                    v-for="(item, index) in tableHead.slice(1)"
                    :label="item.label"
                    :property="item.property"
                    :key="index"
                    width="80"
                    show-overflow-tooltip
                    align="center"
                />
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 显示页数 -->
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pageIdx"
                    :page-size="pageSizes"
                    :total="totalData"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>

            <!-- 编辑弹出框 -->
            <el-dialog title="基础数据修改" :visible.sync="editVisible" width="60%">
                <el-form :model="form" ref="form" label-width="100px">
                    <!-- 自定义编辑内容样式 -->

                    <el-col :span="12">
                        <el-form-item label="井名">
                            <el-select v-model="form.wellname" clearable placeholder="请选择包名" style="width: 100%">
                                <el-option
                                    v-for="item in wellNameOptions"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                    :disabled="item.disabled"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="钻头尺寸">
                            <el-select v-model="form.bitsize" clearable placeholder="请选择钻头尺寸" style="width: 100%">
                                <el-option v-for="item in bitSizeOptions" :key="item" :label="item" :value="item" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="套管层次">
                            <el-select v-model="form.caselevel" clearable placeholder="请选择套管层次" style="width: 100%">
                                <el-option
                                    v-for="item in caselevelOptions"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                    :disabled="item.disabled"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="开始深度">
                            <el-input v-model="form.begindepth"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="结束深度">
                            <el-input v-model="form.enddepth"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="钻井液密度">
                            <el-input v-model="form.fluiddensity"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="压稳密度">
                            <el-input v-model="form.stabledensity"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="问题类别">
                            <template>
                                <el-select v-model="form.category" clearable placeholder="请选择问题类别" style="width: 100%">
                                    <el-option
                                        v-for="item in problemTypeOptions"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                        :disabled="item.disabled"
                                    >
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="发生时间">
                            <el-date-picker
                                v-model="form.occurredtime"
                                type="date"
                                align="right"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                                placeholder="选择时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="处理结果">
                            <el-input v-model="form.result"></el-input>
                        </el-form-item>
                    </el-col>

                    <!-- 此处还可以添加内容 -->
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveNew" v-if="isNewData">确 定</el-button>
                    <el-button type="primary" @click="saveEdit" v-else>确 定</el-button>
                </span>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
import {
    GetDataClassificationMenus,
    GetTableHead,
    GetTableData,
    GetWellList,
    ListDataDictByCondition
} from '../../../../api/module/dataClassification/data_classification';
import {
    EditOneDrillProblem,
    DeleteOneDrillProblem,
    FindDrillProblemByCondition,
    InsertOneDirllProblem
} from '../../../../api/module/dataClassification/drillData/drill_problem';
export default {
    data() {
        return {
            menuName: this.$route.query.menuName, //页面跳转获取的页面名称
            //查询行的数据

            searchModel: {
                //查询部分默认的绑定值
                wellName: '', //井名
                wellType: '', //井型
                wellCategory: '', //井别
                startDrillDate: '', //开钻日期
                endDrillDate: '', //完钻日期
                currentPage: 1, //当前页
                pageSize: 10 //页大小
            },
            //下拉框字典
            wellTypeOptions: [], //井别
            wellClassesOptions: [], // 井型
            caselevelOptions: [], //套管层次
            wellNameOptions: [], //井名
            bitSizeOptions: [], //钻头尺寸
            problemTypeOptions: [], //问题类别
            //表格数据
            tableData: [],
            tableHead: [],
            //分页条数据
            pageIdx: 1,
            pageSizes: 10,
            totalData: 0,
            //table展示数据（样式）
            tableHeight: this.$route.query.tableHeight,
            rowStyle: { height: '30px' },
            cellStyle: {
                padding: 0
                // 'border-bottom': '1px solid #111111',
                // 'border-right': '1px solid #111111'
            },
            //编辑框数据
            editVisible: false,
            form: {}, //每行数据
            idx: -1, //修改行id
            //新增和编辑的判断
            isNewData: false
        };
    },
    created() {
        this.getTableHead();
        this.getTableData();
    },
    methods: {
        // 获取表头
        getTableHead() {
            GetTableHead(this.menuName)
                .then((res) => {
                    this.tableHead = res.data;
                    //console.log('获取的表头数据');
                    //console.log(this.tableHead);
                    //获取到表头后，获取下拉框
                    this.ListDataDictByConditionWellType(); //井别字典列表
                    this.ListDataDictByConditionWellClasses(); //井型字典列表
                    this.ListDataDictByConditionCaselevel(); //套管层次
                    this.GetWellList(); //井名下拉列表
                    this.ListDataDictByConditionBitSize(); //
                    this.ListDataDictByConditionProblemType();
                })
                .catch((err) => {
                    //console.log('获取表头错误' + err);
                    this.$message.error('查询出错，请刷新！');
                });
        },
        // 获取表格数据
        getTableData() {
            GetTableData(this.menuName, this.pageIdx, this.pageSizes, this.searchModel)
                .then((res) => {
                    // console.log('获取表格数据返回的res:');
                    // console.log(res);
                    // console.log('获取表格数据返回的res.data:');
                    // console.log(res.data);
                    // console.log('获取表格数据返回的res.data.data:');
                    // console.log(res.data.data);
                    if (res.data) {
                        this.tableData = res.data.data;
                    } else {
                        this.tableData = [];
                    }
                    this.totalData = res.data.total;
                })
                .catch((err) => {
                    console.log('获取表格数据' + err);
                    this.$message.error('查询出错，请刷新！');
                });
        },
        //获取井别下拉表
        ListDataDictByConditionWellType() {
            ListDataDictByCondition('井别').then((res) => {
                this.wellTypeOptions = res.data;
            });
        },
        //
        ListDataDictByConditionWellClasses() {
            ListDataDictByCondition('井型').then((res) => {
                this.wellClassesOptions = res.data;
            });
        },
        //获取套管层次 下拉表
        ListDataDictByConditionCaselevel() {
            ListDataDictByCondition('套管层次').then((res) => {
                // console.log(res.data)
                this.caselevelOptions = res.data;
            });
        },
        ListDataDictByConditionBitSize() {
            ListDataDictByCondition('钻头尺寸').then((res) => {
                // console.log(res.data)
                this.bitSizeOptions = res.data;
            });
        },
        ListDataDictByConditionProblemType() {
            ListDataDictByCondition('问题类别').then((res) => {
                // console.log(res.data)
                this.problemTypeOptions = res.data;
            });
        },
        //井名列表
        GetWellList() {
            GetWellList().then((res) => {
                // console.log(res.data)
                this.wellNameOptions = res.data;
            });
        },
        //新增数据按钮方法
        submitAddModel() {
            this.editVisible = true;
            this.isNewData = true;
            this.form = {};
        },

        saveNew() {
            //新增的代码
            this.editVisible = false;
            //console.log("x666")
            //console.log(this.form)
            if (this.form.wellname == null) {
                this.$message.success(`新增内容为空，新增失败`);
            } else {
                this.$message.success(`新增成功`);
                // this.tableData.push(this.form) //将展示内容修改
                this.InsertOneDirllProblem();
                this.FindDrillProblemByCondition();
            }
        },

        //保存新增数据
        InsertOneDirllProblem() {
            InsertOneDirllProblem(this.form)
                .then((res) => {
                    // console.log(res)
                })
                .catch((err) => {
                    //console.log("新增数据" + err)
                    this.$message.error('保存出错，请刷新！');
                });
        },
        //编辑保存一行数据
        EditOneDrillProblem() {
            // console.log(this.form)
            // console.log('xxx111');
            EditOneDrillProblem(this.form)
                .then((res) => {
                    // console.log('xxx');
                    // console.log(res);
                })
                .catch((err) => {
                    // console.log('保存数据' + err);
                    this.$message.error('保存出错，请刷新！');
                });
        },
        //删除数据
        DeleteOneDrillProblem(drillproblemid) {
            //console.log(this.form.wellid)
            DeleteOneDrillProblem(drillproblemid)
                .then((res) => {
                    // console.log(res);
                })
                .catch((err) => {
                    //console.log('删除数据' + err);
                    this.$message.error('删除出错，请刷新！');
                });
        },
        //查询数据
        FindDrillProblemByCondition() {
            FindDrillProblemByCondition(this.searchModel)
                .then((res) => {
                    // console.log('查找接口调用成功1：');
                    // console.log(res); //res.data.wells.records[0]
                    this.tableData = res.data.drillProblems.records;
                    this.totalData = res.data.drillProblems.total;
                })
                .catch((err) => {
                    // console.log('查询数据错误原因:' + err);

                    this.$message.error('查询出错，请刷新！');
                });
        },
        //点击查询
        submitSearchModel() {
            this.pageIdx = 1;
            this.currentPage = 1;
            this.FindDrillProblemByCondition();
            this.$message.success('查询数据成功');
        },
        // 点击具体行数据--编辑
        handleEdit(index, row) {
            this.editVisible = true;
            this.isNewData = false;
            this.idx = index;
            this.form = row;
            // console.log(index,row);
        },
        // 保存编辑数据
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form); //将展示内容修改
            //修改数据库数据操作
            // console.log('ddd');
            this.EditOneDrillProblem();
        },
        //点击具体行数据--删除
        handleDelete(index, row) {
            //console.log(index);
            //console.log(row);
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                    //删除数据库数据操作
                    this.DeleteOneDrillProblem(row.drillproblemid);
                })
                .catch(() => {});
        },
        // 分页导航
        handlePageChange(page) {
            // this.$set(this.pageIdx, page)
            this.pageIdx = page;
            this.currentPage = page;
            // console.log(this.pageIdx)
            this.FindDrillProblemByCondition();
        }
    }
};
</script> 

<style>
</style>